import React, { useState } from "react";
import clsx from "clsx";
import { AutoComplete, Button, Empty, Spin } from 'antd';
import { Card, Avatar, Row, Col, Tag } from 'antd';
const { Meta } = Card;
import { Link } from 'react-router-dom';

export function CollegeMain({ className, schoolData, schoolDataloading, setSubmitValue }) {
  if (schoolData === undefined) {
    schoolData = [];
  }
  const dataCount = schoolData.length;
  const [searchResults, setSearchResults] = useState([]);
  const [searchValue, setSearchValue] = useState('');
  const UniversityData = schoolData.map(item => ({ value: item.school }));

  const handleSubmit = () => {
    setSubmitValue(searchValue);
  }
  return (
    <div className={clsx("divide-y divide-solid", className)}>
      <div className="sm:flex justify-between items-center mb-2">
        <div>{`共获取到 ${dataCount} 条数据`}</div>
        <div className="flex items-center">
          <span className="flex-shrink-0">搜索学校：</span>
          <AutoComplete
            options={searchResults}
            style={{
              width: 200,
            }}
            onSearch={(text) => {
              setSearchValue(text);
              const results = UniversityData.filter(item =>
                item.value.includes(text)
              );
              setSearchResults(results);
            }}
            placeholder="请输入学校名称"
          />
          <Button type="primary" className="bg-blue-500 text-white ml-2" onClick={handleSubmit}>提交</Button>

        </div>
      </div>
      <Spin spinning={schoolDataloading}>
        {dataCount === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
        <Row gutter={[16, 16]}>
          {schoolData.map((schoolItem, index) => (
            <Col key={index} xs={24} sm={12} md={12} lg={12} xl={12}>
              <Link to={`/College/${schoolItem.id}`}>
                <Card style={{ marginTop: 16 }}>
                  <Meta
                    avatar={<Avatar src={schoolItem.logo_url} size={90} />}
                    title={schoolItem.school}
                    description={
                      <div className="divide-y-8 divide-white">
                        <div className="whitespace-nowrap overflow-hidden overflow-ellipsis">
                          <Tag>{schoolItem.school_type}</Tag>
                          <Tag>{schoolItem.is_gov}</Tag>
                          <Tag>{schoolItem.prov}</Tag>
                          {schoolItem.prov !== schoolItem.city && <Tag>{schoolItem.city}</Tag>}
                        </div>
                        <div className="whitespace-nowrap overflow-hidden overflow-ellipsis">
                          {schoolItem.is_985 === 1 && <Tag color="blue">985</Tag>}
                          {schoolItem.is_211 === 1 && <Tag color="geekblue">211</Tag>}
                          {schoolItem.is_dfc === 1 && <Tag color="purple">双一流</Tag>}
                          {schoolItem.is_imp_country === 1 && <Tag>国重点</Tag>}
                        </div>
                      </div>
                    }
                  />
                </Card>
              </Link>
            </Col>
          ))}
        </Row>
      </Spin>
    </div>
  )
}
